<template>
  <div class="account">
    <el-container>
      <el-header>
        <el-breadcrumb>
          <el-breadcrumb-item>商品维护</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加商品库存</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品ID" prop="prdtId">
            <el-col :span="15">
              <el-input v-model="ruleForm.prdtId" size="small"></el-input>
            </el-col>
          </el-form-item>
          
          <el-form-item label="库存编码" prop="prdtName">
            <el-col :span="15">
              <el-input v-model="ruleForm.stockCode" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="优惠券类型" prop="discountCoupon">
            <el-radio v-model="ruleForm.discountCoupon" label="1">二维码</el-radio>
          </el-form-item>
          <el-form-item label="优惠券文件上传" prop="discountCouponList">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="ruleForm.discountCouponList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="添加库存数量">
            <el-col :span="15">
              <el-input v-model="ruleForm.stockNum" size="small"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        prdtId: "",
        stockCode: "",
        discountCoupon: "",
        discountCouponList: [],
        stockNum: ""
      },
      rules: {
        discountCoupon: [
          { required: true, message: "请选择优惠券类型", trigger: "change" }
        ],
        discountCouponList: [{ required: true, message: "请上传商品相关图片" }]
      }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style scoped>
.account .el-header {
  height: 60px;
  border-bottom: 1px solid #f3f3f3;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
}
.main-header {
  text-align: center;
  align-items: center;
  display: flex;
}
.main-header >>> .el-input {
  width: 200px;
  margin-right: 20px;
}
.main-content {
  margin: 40px;
}
.el-footer {
  margin: 0 auto;
}
</style>